<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Inheritance in Javascript</title>

<script type="text/javascript" src="joose.js"></script>
<script type="text/javascript" >
	joose.loadComponents("../lib")
	// Define the Shape class
	//
	
	// The position class save the position of each shape by x and y coordinate
	Class("Position", {
		
		has: {
			x: {
				is: "rw"
			},
			
			y: {
				is: "rw"
			}
			
		},
		// Override the contructor methods
		before : {
            initialize : function (props) {
                
				this.setX(0);
				this.setY(0);
			
            } 
        }
	})
	
	// Each shape will have the postion and getName,getPosition, getArea methods.
	Class("Shape", {
		has: {
			// Normal attribute for all subclass
			pos: {
				isa: Position,
				is: "rw"
			},
			
			arrays: {
				
				is: "rw",
				init: {}
				
			}
		},
		methods: {
			// This method will be overrided.
			getName: function () {
				return "Shape Class";
			},
			
			// Normal method for all subclass
			getPosition : function(){
				return "My position is: " + this.getPos().getX() + ", " + this.getPos().getY(); 
			},
			
			// This method will be overrided.
			getArea : function() {
				
			}, 
			
			toStrings : function() {
				var result = "Name is:" + this.getName() + " ||| Position is:"  + this.getPosition() +  " ||| Area is" + this.getArea();
				return result;
			}
		}
	})

	// Define the child class
	//
	
	
	Class("Rectangle", {
		// The Rectangle class inherit from Shape class
		isa: Shape,
		
		// Each Rectangle will  have ifself attribute - Width and Height
		has: {
			width: {
				is: "rw",
				init: 0
			},
			height: {
				is: "rw",
				init: 0
			}
		},
		
		// The override methods from super class
		override: {
			getName: function () {
				return "This is Rectangle(Width: " + this.getWidth() + ", Height: " + this.getHeight() + ") class - Child of " + this.SUPER();
			},
			
			getArea : function() {
				return this.getWidth() * this.getHeight();
			}
			
		},
		
		// Override the contructor methods
		after : {
            initialize : function (props) {
				this.getArrays().push("Rect");
            } 
        }
	})
	
	Class("Circle", {
		// The Circle class inherit from Shape class
		isa: Shape,
		
		// Each Rectangle will will have ifself attribute - Radius
		has: {
			radius: {
				is: "rw",
				init: 0
			}
		},
		
		// The override methods from super class
		override: {
			getName: function () {
				return "This is Circle(Radius: " + this.getRadius() + ") class - Child of " + this.SUPER();
			},
			
			getArea : function() {
				return 3.14 * this.getRadius() * this.getRadius();
			}
		}
	})
	
	Class("Square", {
		// The Circle class inherit from Shape class
		isa: Rectangle,
		
		// Each Rectangle will will have ifself attribute - Radius
		has: {
			side: {
				is: "rw"
			}
		},
		
		// The override methods from super class
		override: {
			getName: function () {
				return "This is Square(Side: " + this.getSide() + ") class - Child of " + this.SUPER();
			},
			
			getArea : function() {
				return this.SUPER();
			}
		},
		
		// Override the contructor methods
		after : {
            initialize : function (props) {
				this.setWidth(this.getSide());
				this.setHeight(this.getSide());
				
				this.getArrays().push("Square");
				
            } 
        }
	})

	// Test
	//
	var shapePos = new Position();
	var shape = new Shape({pos: shapePos});
	
	var rectPos = new Position({x: 0, y: 20});
	var rect = new Rectangle({pos:	rectPos, width: 4, height: 3});
	
	var circlePos = new Position({x: 10, y: 0});
	var circle = new Circle({pos: circlePos, radius: 10});
	
	var squarePos = new Position({x: 100, y: 30});
	var square = new Square({pos: squarePos, side: 5});
	
	document.write(shape.getName());
	document.write("<br />");
	document.write(shape.getPosition());
	document.write("<br />");
	document.write("Area is: " + shape.getArea());
	document.write("<br />");
	document.write("<br />");
	
	
	
	document.write(rect.getName());
	document.write("<br />");
	document.write(rect.getPosition());
	document.write("<br />");
	document.write("Area is: " + rect.getArea());
	document.write("<br />");
	document.write("<br />");
	
	document.write(circle.getName());
	document.write("<br />");
	document.write(circle.getPosition());
	document.write("<br />");
	document.write("Area is: " + circle.getArea());
	document.write("<br />");
	document.write("<br />");
	
	document.write(square.getName());
	document.write("<br />");
	document.write(square.getPosition());
	document.write("<br />");
	document.write("Area is: " + square.getArea());
	document.write("<br />");
	document.write("<br />");
	document.write(shape.getArrays());
	document.write("<br />");
	document.write(rect.getArrays());
	document.write("<br />");
	document.write(circle.getArrays());
	document.write("<br />");
	document.write(square.getArrays());
	
</script>


</head>
<body>
  
</body>
</html>